<template>
  <view class='productList'>
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <uv-notice-bar text="24小时如果平台无人接单配送，订单将自动取消且退款"></uv-notice-bar>
    <view>
      <uv-gap height="5" bgColor=""></uv-gap>
      <view class="goods">
        <uv-radio-group value="平台派送">
          <uv-radio
              :customStyle="{margin: '8px'}"
              :activeColor="themConfig.theme.color"
              label="平台派送"
              name="平台派送">
          </uv-radio>
        </uv-radio-group>
        <uv-cell-group>
          <uv-cell title="收货地址" @click="openInput('destination')"
                   :value="form.destination||'需要填写'"
                   arrow-direction="right"
                   :isLink="true" :border="false">

            <template v-slot:title>
              <view style="margin-top:10px">
                <text style="color: red">*</text>
                收货地址
              </view>
            </template>

            <template v-slot:value>
              <view v-if="!form.destination" style="color: #e45656">
                需要填写
              </view>
              <view v-else style="color: #606266">
                {{ form.destination }}
              </view>
            </template>


            <template v-slot:label>
              <view style="margin-top:10px">
                {{ form.phone }}
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>


      </view>
      <uv-gap height="5" bgColor=""></uv-gap>
      <view class="goods">
        <uv-cell-group>
          <uv-cell title="订单备注" @click="openInput('content')"
                   :value="form.content||'需要填写'"
                   label="填写您的需求：请填写您的跑腿需求"
                   arrow-direction="right"
                   :isLink="true" :border="false">
            <template v-slot:title>
              <view style="margin-top:10px">
                <text style="color: red">*</text>
                订单备注
              </view>
            </template>

            <template v-slot:value>
              <view v-if="!form.content" style="color: #e45656">
                需要填写
              </view>
              <view v-else style="color: #606266;display: flex;justify-content: flex-end">
                <text>{{ form.content.length > 10 ? form.content.substring(0, 11) + '...' : form.content }}</text>
                <!--                  <uv-text :lines="1" color="#606266" :text="form.content "></uv-text>-->
              </view>
            </template>

          </uv-cell>
          <uv-cell v-if="taskInfoGoods.taskCode==='TASK02'" title="取件码" @click="openInput('sensitiveContent')"
                   :value="form.sensitiveContent"
                   arrow-direction="right"
                   :isLink="true" :border="false">
            <template v-slot:title>
              <view style="margin-top:10px">
                <text style="color: red">*</text>
                取件码
              </view>
            </template>
            <template v-slot:value>
              <view v-if="!form.sensitiveContent" style="color: #e45656">
                需要填写
              </view>
              <view v-else style="color: #606266">
                <text>{{
                    form.sensitiveContent.length > 10 ? form.sensitiveContent.substring(0, 11) + '...' : form.sensitiveContent
                  }}
                </text>
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>
        <uv-cell-group>
          <uv-cell @click="openInput('expectedDeliveryTime')" icon="clock" title="期望送达时间" :isLink="true" arrow-direction="right">
            <template v-slot:value>
              <view style="color: #606266">
                {{ form.expectedDeliveryTimeStart }} ~ {{ form.expectedDeliveryTimeEnd }}
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>

      <view class="goods-info">
        <uv-gap height="5" bgColor=""></uv-gap>
        <view class="market">

          <uv-cell-group>
            <uv-cell :border="false">

              <template v-slot:icon>
                <uv-image mode="aspectFill" radius="7px" :src="taskInfoGoods.mainPic[0]" height="50px" width="50px"></uv-image>
              </template>
              <template v-slot:title>
                <view style="margin-left: 10px;display: flex">
<!--                  <uv-tags :text="form.marketTag"  size="mini" type="error"></uv-tags>-->
                  <text style="font-size: 17px;">{{ taskInfoGoods.taskName }}</text>
                </view>
                <view style="margin-left: 10px;color: #909399;font-size: 13px">{{ form.skuName }} {{ form.salesPrice }}/元 x {{ form.num }}/个
                </view>
              </template>
              <template v-slot:value>
                <view style="margin-left: 10px">
                  <view :style="{color:themConfig.theme.color}">
                    <text class="money-dot">¥</text>
                    <text class="money-value">{{ (form.salesPrice * form.num).toFixed(2) }}</text>
                  </view>
                </view>
                <view></view>
              </template>
            </uv-cell>

            <!--            任务费-->
            <uv-cell :title="form.taskCode==='TASK02'?'取件费':'任务费'"
                     :value="(form.salesPrice*form.num).toFixed(2)" :border="false">
            </uv-cell>

            <uv-cell title="跑腿费"
                     :value="form.errandChargeAmount.toFixed(2)" :border="false">
            </uv-cell>

            <uv-cell title="小费"
                     :border="false"
                     :isLink="true"
                     @click="openInput('amount')"
            >

              <template v-slot:value>
                <view v-if="form.serviceFee <=0" style="color: #e45656">
                  {{ (form.serviceFee).toFixed(2) }}
                </view>
                <view v-else style="color: #606266">
                  {{ (form.serviceFee).toFixed(2) }}
                </view>
              </template>
              <template v-slot:label>
                <view style="margin-top: 10px">
                  <uv-text :color="themConfig.theme.subColor" size="13" text="根据物品、事情大小适当增加费用"></uv-text>
                </view>
              </template>
            </uv-cell>
            <uv-cell title="红包"
                     value="无"
                     :isLink="true" :border="false">
            </uv-cell>

            <uv-cell title="配送"
                     value="平台配送" :border="false">
            </uv-cell>

            <uv-cell title="合计"
                     :value="((form.serviceFee)+ (form.salesPrice*form.num)+form.errandChargeAmount).toFixed(2)" :border="false">
              <template v-slot:title>
                <view style="display: flex;align-items: center">
                  <view style="margin-right: 10px">合计</view>
                  <uv-text size="12" :text="'[('+(form.taskCode==='TASK02'?'取件费':'任务费')+')* 数量]+小费+跑腿费'"/>
                </view>
              </template>

            </uv-cell>

            <uv-cell title="邀请人" v-if="false" :border="false">
              <template v-slot:value>
                <view style="display: flex;align-items: center;color: #c4c6c9"
                      v-if="shareInfo!==undefined && shareInfo!==null && shareInfo!=='null' && shareInfo!=='' && JSON.parse(shareInfo).code !==userInfo.userCode ">
                  {{ JSON.parse(shareInfo).userName }}
                  <text style="margin-left: 20rpx;font-size:13px;color: #c4c6c9">{{
                      JSON.parse(shareInfo).expireTime ? '有效期至:' + JSON.parse(shareInfo).expireTime : ''
                    }}
                  </text>
                </view>
                <view style="display: flex;font-size:14px;align-items: center;color: #c4c6c9"
                      v-else>
                  无
                </view>
              </template>

            </uv-cell>

          </uv-cell-group>
        </view>

        <uv-gap height="5" bgColor=""></uv-gap>
        <view class="goods">
          <view class="agreement">
            <view>
              <uv-checkbox-group v-model="isReadAggreement">
                <uv-checkbox
                    shape="circle"
                    @change="agreementReadClick"
                    :activeColor="themConfig.theme.subColor"
                    :customStyle="{marginBottom: '8px'}"
                    v-for="(item, index) in [{name:'',value: 1}]"
                    :key="index" :label="item.name"
                    :name="item.value"
                ></uv-checkbox>
              </uv-checkbox-group>

            </view>
            <view class="agreementText">
              <text :style="{
                    color:themConfig.theme.subColor
                  }" @click="readAgreement">请阅读协议声明
              </text>
            </view>
          </view>
        </view>
      </view>

      <uv-gap height="70" bgColor=""></uv-gap>
    </view>
    <!--        这里的高度就是 下面提交按钮的高度-->
    <!--    <uv-gap height="105" bgColor=""></uv-gap>-->
    <view class="button">
      <view class="money">
        <uv-image mode="widthFix" src="https://minio.thisforyou.cn:1443/common/run1.png" width="40px"></uv-image>
        <view style="margin-left: 10px">
          <view :style="{color:themConfig.theme.color}">
            <text class="money-dot">¥</text>
            <text class="money-value">{{ ((form.serviceFee) + (form.salesPrice * form.num) +form.errandChargeAmount).toFixed(2) }}</text>
          </view>
<!--          <view @click="openInput('amount')" style="display: flex;align-items: center">-->
<!--            <view>-->
<!--              <uv-text :color="themConfig.theme.subColor" size="13" text="点击增加适当费用"></uv-text>-->
<!--            </view>-->
<!--            <view>-->
<!--              <uv-icon color="#e45656" size="12" name="arrow-right"></uv-icon>-->
<!--            </view>-->
<!--          </view>-->
        </view>
      </view>
      <view class="submitBtn">
        <uv-button text="点这里下单" :disabled="btnDisabled" @click="submit"
                   :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"></uv-button>
      </view>
    </view>

    <uv-picker ref="picker" :zIndex="11" :columns="useAddress" @confirm="useAddressConfirm"></uv-picker>

    <!--  设置表单-->
    <uv-popup :zIndex="10" @close="closeFormPopup" mode="bottom" closeable
              closeIconPos="top-right"
              :closeOnClickOverlay="true"
              custom-style="border-radius:10px" ref="formPopup">
      <view style="padding: 60rpx 30rpx 10rpx 30rpx">
        <view style="margin-top: 10rpx">

          <uv-form labelWidth="100" labelPosition="left" :rules="rules" :model="form" ref="form">

            <uv-form-item v-if="currentFormField==='content'" required label="订单备注" prop="content" borderBottom>
              <uv-textarea v-model="form.content"
                           :placeholder="taskInfoGoods.taskCode==='TASK02'?'什么物品，是否易碎等等':'备注说明，所有人可见'"></uv-textarea>
            </uv-form-item>

            <uv-form-item v-if="currentFormField==='expectedDeliveryTime'" required label="期望送达时间" prop="expectedDeliveryTime"
                          borderBottom>
              <div @click="showTime('expectedDeliveryTimeStart')">
                <uv-input inputAlign="center" border="bottom" readonly v-model="form.expectedDeliveryTimeStart"
                          placeholder="开始时间"></uv-input>
              </div>
              ~
              <div @click="showTime('expectedDeliveryTimeEnd')">
                <uv-input inputAlign="center" border="bottom" readonly v-model="form.expectedDeliveryTimeEnd"
                          placeholder="结束时间"></uv-input>
              </div>
            </uv-form-item>

            <uv-form-item v-if="currentFormField==='content'" required label="任务地址" prop="actionAddress" borderBottom>
              <uv-input border="bottom" placeholder="如实填写" v-model="form.actionAddress">
                <template v-slot:prefix>
                  <uv-text
                      @click="selectUseAddress(2)"
                      text="常用"
                      margin="0 3px 0 0"
                      type="tips"
                  ></uv-text>
                </template>
              </uv-input>
            </uv-form-item>


            <uv-form-item v-if="currentFormField==='destination'" required label="收货地址" prop="destination" borderBottom>
              <uv-input border="bottom" placeholder="如实填写" v-model="form.destination">
                <template v-slot:prefix>
                  <uv-text
                      @click="selectUseAddress(1)"
                      text="常用"
                      margin="0 3px 0 0"
                      type="tips"
                  ></uv-text>
                </template>
              </uv-input>
            </uv-form-item>
            <uv-form-item v-if="currentFormField==='destination'" required label="联系电话" prop="phone" borderBottom>
              <uv-input border="bottom" v-model="form.phone" placeholder="如实填写,方便接单人联系"></uv-input>
            </uv-form-item>


            <uv-form-item v-if="currentFormField==='sensitiveContent'" label="取件码" prop="sensitiveContent" borderBottom>
              <uv-textarea v-model="form.sensitiveContent"
                           placeholder="取件码；仅派送员可见；格式：取件码:手机尾号;例如：取件码：11-2-03 手机尾号2914"></uv-textarea>
            </uv-form-item>


            <uv-form-item v-if="currentFormField==='amount'" required label="小费" prop="amount" borderBottom>
              <view style="width: 100%">
                <view>
                  <uv-input border="bottom" type="digit" @blur="amountInputChange" v-model="form.serviceFee" placeholder="小费"
                            prefixIcon="https://minio.thisforyou.cn:1443/test/金额.png"
                  >
                  </uv-input>
                </view>
                <view style="display: flex;justify-content: center;margin-top: 20rpx;flex-wrap: wrap">
                  <uv-button @click="useAmount(1)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥1" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(2)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥2" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(3)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥3" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(4.5)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥4.5" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(7)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥7" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(9)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥9" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(10)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥10" plain
                             size="small"></uv-button>
                  <uv-button @click="useAmount(15)" style="margin: 20rpx" :color="themConfig.theme.color" text="¥15" plain
                             size="small"></uv-button>
                </view>
              </view>
            </uv-form-item>
          </uv-form>
          <view class="search-btn">
            <view class="btn">

              <uv-button :color="themConfig.theme.color" :iconColor="themConfig.theme.color"
                         text="确定" @click="closeFormPopup"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <uv-datetime-picker
        ref="deliveryTimePicker"
        v-model="deliveryDatetimePicker.value"
        mode="datetime"
        :filter="dateTimePickerfilter"
        :minDate="deliveryDatetimePicker.minDate"
        :maxDate="deliveryDatetimePicker.maxDate"
        :formatter="datePickerformatter"
        @confirm="confirmDeliveryTime">
    </uv-datetime-picker>
    <FloatingBackHome/>
  </view>
</template>
<script>
import {mixins} from './index.js'

export default {
  mixins: [mixins]
}
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
